<template>
  <div class="device-topology-chart el-main-padding">
    <div class="my-breadcrumb-div">
      <i class="el-icon-location my-breadcrumb-icon my-breadcrumb-padding" />
      <el-breadcrumb
        class="my-breadcrumb-padding"
        separator="/"
      >
        <el-breadcrumb-item>
          <!-- 设置 -->
          {{ $t('message.monitor.breadCrumb.crumb1') }}
        </el-breadcrumb-item>
        <el-breadcrumb-item>
          <!-- 设备网络拓扑 -->
          {{ $t('message.monitor.breadCrumb.crumb2') }}
        </el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <el-card style="height: calc(100% - 3.5em);">
      <div
        id="deviceTopologyChart"
        class="device-topology-chart"
      />
    </el-card>

    <div>
      <!-- 展示dialog -->
      <!-- 设备信息 -->
      <el-dialog
        :title="$t('message.monitor.dialog.title')"
        :visible.sync="dialog.visible"
        v-loading="dialog.loading"
        width="520px"
      >
        <el-card
          shadow="never"
        >
          <!-- 当为路由器或交换机类型时 -->
          <el-row
            class="device-monitor-card"
            v-if="dialog.type === 1 || dialog.type === 2"
          >
            <el-col
              :offset="6"
              :span="12"
            >
              <!-- 设备名称： -->
              {{ $t('message.monitor.dialog.type12.label1') }} {{ dialog.data.sysName }}
            </el-col>
            <el-col
              :offset="6"
              :span="12"
            >
              <!-- 设备地址： -->
              {{ $t('message.monitor.dialog.type12.label2') }} {{ dialog.data.ip }}
            </el-col>
            <el-col
              :offset="6"
              :span="12"
            >
              <!-- 网络状态： -->
              {{ $t('message.monitor.dialog.type12.label3') }} {{ $t(`message.monitor.deviceState.${dialog.data.state}`) }}
            </el-col>
          </el-row>
          <!-- 当为服务器type时 -->
          <el-row
            class="device-monitor-card"
            v-if="dialog.type === 3"
          >
            <el-col
              :offset="6"
              :span="12"
            >
              <!-- 设备名称： -->
              {{ $t('message.monitor.dialog.type3.label1') }} {{ dialog.data.sysName }}
            </el-col>
            <el-col
              :offset="6"
              :span="12"
            >
              <!-- 硬盘大小： -->
              {{ $t('message.monitor.dialog.type3.label2') }} {{ dialog.data.diskSpace }}G
            </el-col>
            <el-col
              :offset="6"
              :span="12"
            >
              <!-- 硬盘占用率： -->
              {{ $t('message.monitor.dialog.type3.label3') }} {{ dialog.data.diskUseRate }}%
            </el-col>
            <el-col
              :offset="6"
              :span="12"
            >
              <!-- 内存大小： -->
              {{ $t('message.monitor.dialog.type3.label4') }} {{ dialog.data.memorySize }}G
            </el-col>
            <el-col
              :offset="6"
              :span="12"
            >
              <!-- 内存占用率： -->
              {{ $t('message.monitor.dialog.type3.label5') }} {{ dialog.data.memoryUseRate }}%
            </el-col>
          </el-row>
        </el-card>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import echarts from 'echarts'
function convertData (data) {
  return [
    ...data.map(topoItem => {
      return {
        ...topoItem,
        itemStyle: {
          color: topoItem.state === 0 ? '#57a600' : '#8a8a8a',
          borderWidth: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)',
          shadowBlur: 10
        },
        children: topoItem.children ? convertData(topoItem.children) : null
      }
    })
  ]
}
export default {
  name: 'DeviceTopologyChart',

  watch: {
  },

  computed: {
    getDialogTitle () {
      return 'title'
    },
    topologyData () {
      return convertData(this.data)
    }
  },

  data () {
    return {
      deviceTopologyChart: null,
      data: [],

      dialog: {
        visible: false,
        loading: false,
        type: -1,
        data: {}
      }
    }
  },

  mounted () {
    let self = this
    self.$nextTick(async () => {
      // 初始化渲染echarts
      await this.getTopologyTree()
      if (!this.deviceTopologyChart) {
        self.createDeviceTopologyChart()
      }
    })
  },

  methods: {
    // 设备状态拓扑图
    createDeviceTopologyChart () {
      let self = this
      if (self.deviceTopologyChart === null) {
        self.deviceTopologyChart = echarts.init(document.getElementById('deviceTopologyChart'))
      }

      let series = [
        {
          type: 'tree',

          data: this.topologyData,

          left: '2%',
          right: '2%',
          top: '20%',
          bottom: '20%',

          orient: 'vertical',

          roam: true,
          expandAndCollapse: false, // 是否可展开折叠
          // symbol: '',
          symbol: (value, params) => {
            switch (params.data.type) {
              case 1: // 路由器
                return 'path://M980.282 834.508l-24.797-223.165c-0.954-41.063-34.651-74.17-75.936-74.17h-39.787V88.666c0-15.98-12.956-28.936-28.936-28.936-15.982 0-28.937 12.956-28.937 28.936v448.506H550.403V88.666c0-15.98-12.956-28.936-28.936-28.936-15.982 0-28.937 12.956-28.937 28.936v448.506H261.043V88.666c0-15.98-12.956-28.936-28.936-28.936-15.982 0-28.936 12.956-28.936 28.936v448.506H145.3c-41.322 0-75.04 33.165-75.939 74.272L44.179 852.462c-0.171 1.649-0.17 3.274-0.067 4.876-0.015 0.587-0.088 1.156-0.088 1.747v21.702c0 41.882 34.074 75.957 75.957 75.957h788.505c41.883 0 75.957-34.075 75.957-75.957v-21.702c-0.001-8.609-1.508-16.855-4.161-24.577z m-71.796 64.364H119.98c-9.973 0-18.085-8.113-18.085-18.085v-21.702c0-9.971 8.112-18.085 18.085-18.085h788.505c9.972 0 18.085 8.114 18.085 18.085v21.702h0.001c0 9.972-8.113 18.085-18.085 18.085z'
              case 2: // 交换机
                return 'path://M904.888889 128.711111h-785.777778c-30.435556 0-55.111111 28.231111-55.111111 63.004445v199.964444c0 31.928889 20.835556 56.32 48 56.32h800c25.6 0 48-24.391111 48-56.32V191.715556c0-34.773333-24.675556-63.004444-55.111111-63.004445zM406.613333 331.022222h-238.933333v-85.333333h238.933333v85.333333z m290.062223-40.035555c-1.208889 21.404444-18.56 38.755556-39.964445 39.964444-26.026667 1.493333-46.72-19.2-45.226667-45.226667 1.208889-21.404444 18.56-38.755556 39.964445-39.964444 26.026667-1.493333 46.72 19.2 45.226667 45.226667z m136.604444-1.351111c-0.64 22.471111-18.915556 40.675556-41.315556 41.315555-25.386667 0.711111-45.368889-19.697778-43.875555-45.297778 1.208889-21.404444 18.56-38.755556 39.964444-39.964444 25.528889-1.351111 45.937778 18.56 45.226667 43.946667zM912.853333 512.711111h-785.777777c-30.435556 0-55.111111 28.231111-55.111112 63.004445v199.964444c0 31.928889 20.835556 56.32 48 56.32h800c25.6 0 48-24.391111 48-56.32V575.715556c0.071111-34.773333-24.675556-63.004444-55.111111-63.004445z m-498.204444 202.311111h-238.933333v-85.333333h238.933333v85.333333z m289.991111-40.035555c-1.208889 21.404444-18.56 38.755556-39.964444 39.964444-26.026667 1.493333-46.72-19.2-45.226667-45.226667 1.208889-21.404444 18.56-38.755556 39.964444-39.964444 26.026667-1.493333 46.72 19.2 45.226667 45.226667z m136.604444-1.351111c-0.64 22.471111-18.915556 40.675556-41.315555 41.315555-25.386667 0.711111-45.368889-19.697778-43.875556-45.297778 1.208889-21.404444 18.56-38.755556 39.964445-39.964444 25.528889-1.351111 45.937778 18.56 45.226666 43.946667z'
              case 3: // 服务器
                return 'path://M994.97656 230.580837c-8.201977-60.439696-99.947836-98.086565-111.579918-102.56772L709.446948 57.369115c-8.06092-2.575159-17.166009 0.64508-21.550833 7.914702-4.43471 7.200813-3.051658 16.476203 3.14627 22.245799 29.75453 27.370315 39.958836 81.727336 40.244392 81.727336 0 7.962868-1.811385 673.575339-1.811385 690.786073 0 48.590866-35.572292 77.581622-37.289065 78.918228-6.865371 5.339542-8.8677 14.683741-4.814877 22.219996 3.192716 6.105037 9.586749 9.774252 16.352348 9.774252 1.720213 0 3.435266-0.24083 5.103873-0.715609 8.155531-2.287884 150.105817-55.836405 164.220167-60.460338 122.498113-39.862504 123.831278-110.508226 123.831278-113.463552 0.385328-229.211548 1.764939-353.689626 2.57516-425.788928 1.05105-98.606069 1.099216-100.510346-4.477716-139.946237zM531.208762 48.931469H149.360964c-68.756927 0-124.595053 54.455074-124.595052 121.402336v686.759055c0 66.897377 55.836405 121.35073 124.595052 121.35073h381.847798c68.664036 0 124.548607-54.453353 124.548607-121.35073V170.332085c-0.00172-66.947263-55.888011-121.400617-124.548607-121.400616zM319.973444 828.14683c-41.390053 0-75.054629-32.759743-75.054628-73.028218 0-40.3132 33.664575-73.121109 75.054628-73.121108 41.388333 0 75.14752 32.806189 75.14752 73.121108-0.00172 40.270194-33.760907 73.028217-75.14752 73.028218z m236.697916-316.902864c0 30.80386-23.367378 55.860488-52.163749 55.860488H175.969224c-28.801532 0-52.260081-25.056628-52.260081-55.860488v-132.748864h432.962217v132.748864z m0-168.701323H123.709143v-132.846916c0-30.80042 23.458549-55.884571 52.260081-55.884571h328.536667c28.798092 0 52.16375 25.084151 52.163749 55.884571l0.00172 132.846916z'
              default:
                return 'rect'
            }
          },
          symbolSize: [64, 64],
          symbolKeepAspect: true,
          initialTreeDepth: null,

          lineStyle: {
            curveness: 0.7
          },
          label: {
            position: ['50%', -50],
            verticalAlign: 'middle',
            align: 'center',
            fontSize: 12,
            padding: 10,
            lineHeight: 20,
            borderColor: '#DCDFE6',
            borderWidth: 1.5,
            borderRadius: 10,
            color: '#4E6D9D',
            shadowColor: 'rgba(0, 0, 0, 0.5)',
            shadowBlur: 8,
            backgroundColor: 'rgba(0,0,0, 0.05)',
            formatter: (params) => {
              // 类型 状态 地址
              return [
                `${this.$t('message.monitor.treeTopology.card.label1')}${this.$t(`message.monitor.deviceType.${params.data.type}`)}`,
                `${this.$t('message.monitor.treeTopology.card.label2')}${this.$t(`message.monitor.deviceState.${params.data.state}`)}`,
                `${this.$t('message.monitor.treeTopology.card.label3')}${params.data.ip}`
              ].join('\n')
            }
          },

          leaves: {
            label: {
              position: ['50%', 114],
              verticalAlign: 'middle',
              align: 'center'
            }
          },

          animationDurationUpdate: 750
        }
      ]

      let option = {
        grid: {
          containLabel: true
        },
        tooltip: {
          show: false
        },
        series: series
      }
      self.deviceTopologyChart.setOption(option)
      self.deviceTopologyChart.on('click', async (params) => {
        if (!params.data) {
        } else {
          // self.$message(params.data.name)
          switch (params.data.type) {
            case 1: // 路由器
              this.dialog.type = params.data.type
              this.dialog.visible = true
              this.getRouterInfo(params.data.ip)
              break
            case 2: // 交换机
              this.dialog.type = params.data.type
              this.dialog.visible = true
              this.getSwitchInfo(params.data.ip)
              break
            case 3: // 服务器
              this.dialog.type = params.data.type
              this.dialog.visible = true
              this.getServerInfo(params.data.ip)
              break
            default:
              break
          }
        }
      })
    },
    async getTopologyTree () {
      let res = await this.$store.dispatch('axios', {
        method: 'get',
        url: `/api/monitor/devices/topology`
      })
      this.data = JSON.parse(res.data.data)
    },
    async getRouterInfo (ip) {
      try {
        this.dialog.loading = true
        let res = await this.$store.dispatch('axios', {
          method: 'get',
          url: `api/monitor/devices/router/config/routerConfig/${ip}`
        })
        this.dialog.data = res.data
      } finally {
        this.dialog.loading = false
      }
    },
    async getSwitchInfo (ip) {
      try {
        this.dialog.loading = true
        let res = await this.$store.dispatch('axios', {
          method: 'get',
          url: `api/monitor/devices/switchboard/config/switchConfig/${ip}`
        })
        this.dialog.data = res.data
      } finally {
        this.dialog.loading = false
      }
    },
    async getServerInfo (ip) {
      try {
        this.dialog.loading = true
        let res = await this.$store.dispatch('axios', {
          method: 'get',
          url: `api/monitor/devices/server/config/serverConfig/${ip}`
        })
        this.dialog.data = res.data
      } finally {
        this.dialog.loading = false
      }
    }
  }
}
</script>

<style scoped>
  .device-topology-chart{
    height: 100%;
  }
  .device-monitor-card{
    text-align: left;
  }
</style>
